<template>
	<view>
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="2000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper>
		<view class="boutique">
			<view class="boutique_list " v-for="(item,index) in boutiqueList" :key="index" @tap="gotoItem(item.prop)">
				<image :src="item.url" class="boutique_img"></image>
				<view class="title">{{item.name}}</view>
			</view>
		</view>
		<view class="toolList">
			<view class="toolItem" v-for="(subItem,index) in toolsData" :key="index" @tap="gotoItem(subItem.prop)">
				 <view class="tools-li__icon iconfont" :class="subItem.icon" :style="{ 'color': subItem.iconColor}"></view>
				 <view class="tools-li__right">
				  <p class="title">{{ subItem.title }}</p>
				  <p class="subtitle">{{ subItem.subtitle }}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180227%2Fcf1558023f434892a0d41cef459956c4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637978174&t=fe40830623906825879a941cce1e3f96'
				}, {
					id: 1,
					type: 'image',
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180227%2Fcf1558023f434892a0d41cef459956c4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637978174&t=fe40830623906825879a941cce1e3f96'
				}, {
					id: 2,
					type: 'image',
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180227%2Fcf1558023f434892a0d41cef459956c4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637978174&t=fe40830623906825879a941cce1e3f96'
				}],
				boutiqueList: [{
						name: "二维码生成",
						url: "../../static/erweima.jpg",
						prop: 'qrcode'
					},
					{
						name: "手持弹幕",
						url: "../../static/danmu_01.jpg",
						prop:'bulletChat'
					},
					{
						name: "视频去水印",
						url: "../../static/shuiyin_01.png",
						prop:'watermark'
					},
					{
						name: "IP查询",
						url: "../../static/ip.jpg",
						prop:'ip'
					},
				],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				toolsData:  [{
				    title: 'RMB大写转换',
				    subtitle: '金额转成大写',
				    icon: 'icon-rmb-full',
				    iconColor: '#ff38c1',
					prop:'rmbCase',
				    path: ''
				  }, 
				  {
				    title: '视频去水印',
				    subtitle: '短视频水印一键去除',
				    icon: 'icon-shuiyin',
				    iconColor: '#4d0000',
				  	prop:'watermark',
				    path: '/sub-pack-a/hand-held-barrage/index'
				  },{
				    title: '手机号查询',
				    subtitle: '手机号归属地查询',
				    icon: 'icon-shoujihao',
				    iconColor: '#ffba00',
					prop:'mobile',
				    path: '/sub-pack-a/hand-held-barrage/index'
				  }, {
				    title: '每日饮水量计算',
				    subtitle: '不要忘记喝水喔',
				    icon: 'icon-fenzu',
				    iconColor: '#2699f7',
					prop:'kingWater',
				  }, 
				  {
				    title: '彩色二维码',
				    subtitle: '文字转化为二维码',
				    icon: 'icon-erweima',
				    iconColor: '#f87bba',
				  	prop:'qrcode',
				  },{
				    title: '标准体重计算',
				    subtitle: '你觉得自己胖吗',
				    icon: 'icon-icontz',
				    iconColor: '#00a79e',
					prop:'weight',
				  },
				  {
				    title: '手持弹幕',
				    subtitle: '接人、表白搭讪神器',
				    icon: 'icon-danmu',
				    iconColor: '#aa0000',
				  	prop:'bulletChat',
				    path: '../../static/danmu_01.jpg'
				  },
				  {
				    title: '身份证查询',
				    subtitle: '身份证信息查询',
				    icon: 'icon-shenfenzheng',
				    iconColor: '#5500ff',
				  	prop:'id',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '银行卡查询',
				    subtitle: '查询银行卡详细信息',
				    icon: 'icon-yinhangqia',
				    iconColor: '#ff0000',
				  	prop:'blankCard',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: 'IP查询',
				    subtitle: '定位位置等详细信息',
				    icon: 'icon-IPdizhi',
				    iconColor: '#ff143f',
				  	prop:'ip',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '房贷计算器',
				    subtitle: '商业、公积金、组合贷款计算',
				    icon: 'icon-a-53',
				    iconColor: '#aa55ff',
				  	prop:'house',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '火星文转换',
				    subtitle: '非主流火星文转换',
				    icon: 'icon-icon-huoxing3d',
				    iconColor: '#f4011a',
				  	prop:'wait',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '设备用电计算',
				    subtitle: '计算设备每日、每月用电量',
				    icon: 'icon-dianfei',
				    iconColor: '#adff81',
				  	prop:'electric',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '快寄查询',
				    subtitle: '查询各种快递进度',
				    icon: 'icon-kuaijijiyouji',
				    iconColor: '#ff7fbf',
				  	prop:'wait',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '文字转语音',
				    subtitle: '文字转换各种类型语音',
				    icon: 'icon-wenzi1',
				    iconColor: '#000000',
				  	prop:'wait',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '圣诞头像转换',
				    subtitle: '微信头像圣诞帽',
				    icon: 'icon-shengdanmao',
				    iconColor: '#ee1329',
				  	prop:'wait',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '天气查询',
				    subtitle: '查询各地区未来天气',
				    icon: 'icon-tianqi-leidiantianqi',
				    iconColor: '#5555ff',
				  	prop:'wait',
				    path: '/sub-pack-a/standard-weight/index'
				  },
				  {
				    title: '敬请期待... ...',
				    subtitle: '',
				    icon: '',
				    iconColor: '',
				  	prop:'wait',
				    path: ''
				  }]
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
		},
		methods: {
			gotoItem(e) {
				if (e == 'qrcode') {
					uni.navigateTo({
						url: "/pages/component/qrcode/index"
					})
				}
				if(e=='bulletChat'){
					uni.navigateTo({
						url: "/pages/component/bulletChat/index"
					})
				}
				if(e=='rmbCase'){
					uni.navigateTo({
						url: "/pages/component/rmbCase/rmbCase"
					})
				}
				if(e=='kingWater'){
					uni.navigateTo({
						url: "/pages/component/kingWater/kingWater"
					})
				}
				if(e=='weight'){
					uni.navigateTo({
						url: "/pages/component/weight/weight"
					})
				}
				if(e=='watermark'){
					uni.navigateTo({
						url: "/pages/component/watermark/watermark"
					})
				}
				if(e=='ip'){
					uni.navigateTo({
						url: "/pages/component/ip/ip"
					})
				}
				if(e=='mobile'){
					uni.navigateTo({
						url: "/pages/component/ip/mobile"
					})
				}
				if(e=='id'){
					uni.navigateTo({
						url: "/pages/component/ip/id"
					})
				}
				if(e=='blankCard'){
					uni.navigateTo({
						url: "/pages/component/ip/blankCard"
					})
				}
				if(e=='house'){
					uni.navigateTo({
						url: "/pages/component/ip/house"
					})
				}
				if(e=='mars'){
					uni.navigateTo({
						url: "/pages/component/ip/mars"
					})
				}
				if(e=='electric'){
					uni.navigateTo({
						url: "/pages/component/ip/electric"
					})
				}
				if(e=='wait'){
					uni.showToast({
					title: '拼命开发中... ',
					icon:'none',
					duration: 2000
					});
				}
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.uni-swiper .uni-swiper-dots-horizontal {
		bottom: 40rpx !important;
	}

	.boutique {
		height: 220upx;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 10px;
		display: flex;
		justify-content: space-around;
	}

	.boutique_list {
		width: 22%;
		height: 120upx;
		/* border: 1px solid red; */
		text-align: center;
		margin-top: 34upx;
		// box-shadow: 1px 1px 2px #888888;
		border-radius: 6px;
		.title{
			margin-top: 10upx;
		}
	}

	.boutique_img {
		width: 94upx;
		height: 94upx;
		border-radius: 20%;
		margin-top: 8upx;
		margin-bottom: 6upx;
	}

	.toolList {
		background: #FFFFFF;
		border-radius: 10px;
		margin:  10px;
		display: flex;
		padding: 20upx;
		justify-content: space-around;
		flex-wrap: wrap;
		.toolItem{
			height: 160upx;
			box-shadow: 1px 1px 2px #888888;
			width: 46%;
			margin-top: 28upx;
			border-radius: 14upx;
			.tools-li__icon{
				float: left;
				width: 20%;
				height: 100%;
				font-size: 60upx;
				padding: 40upx 10upx;
			}
			.tools-li__right{
				float: right;
				width: 72%;
				padding: 30upx 10upx 20upx 0;
				.title{
					font-size: 30upx;
					margin-bottom: 12upx;
					color: #432847;
					// font-weight: 500;
				}
				.subtitle{
					color: #343434;
					font-size: 24upx;
				}
			}
		}
	}
	.iconIamge{
		width: 20rpx;
		height: 20rpx;
	}
</style>
